<template>
  <div class="order-evaluation">
    <nav-bar title="发表评价"
             bgColor="#eeeeee">
      <template #right>
        <span class="right-text"
              @click="publish">发布评价</span>
      </template>
    </nav-bar>
    <div class="evaluation-content">
      <div class="content-good">
        <order-good-card></order-good-card>
        <div class="good-rate">
          描述相符
          <van-rate v-model="rate"
                    :size="16"
                    gutter="0.16rem"
                    color="#e85014"
                    void-icon="star"
                    void-color="#eee" />
          <em>非常差/差/一般/好/非常好</em>
        </div>
        <textarea cols="30"
                  rows="5"
                  v-model="text"
                  placeholder="对于这款产品我，我想说..."></textarea>
      </div>
      <van-checkbox v-model="checked"
                    icon-size="18"
                    checked-color="#e85014">匿名
      </van-checkbox>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBarSecond'
import OrderGoodCard from '@/components/OrderGoodCard'
export default {
  data () {
    return {
      rate: 0,
      checked: false,
      text: '',
    };
  },
  components: {
    NavBar,
    OrderGoodCard
  },
  created () { },
  methods: {
    publish () {
      let params = {
        rate: this.rate,
        checked: this.checked,
        text: this.text
      }
      console.log(params);
      this.$toast({
        message: '发布成功',
        type: 'success',
        onClose: () => {
          this.$router.go(-1)
        }
      })
    }
  }
}

</script>

<style lang='scss' scoped>
.order-evaluation {
  @include top-page;
  background-color: #eeeeee;
  .right-text {
    color: #e85014;
  }
  .evaluation-content {
    @include wh100;
    box-sizing: border-box;
    padding: 0.1rem;
    @include flex-column;
    .content-good {
      @include flex-column;
      box-sizing: border-box;
      padding: 0.3rem;
      background-color: #ffffff;
      border-radius: 0.15rem;
      .good-rate {
        height: 0.8rem;
        display: flex;
        align-items: center;
        .van-rate {
          margin: 0 0.3rem;
        }
        em {
          color: #969696;
        }
      }
      textarea {
        border: none;
        resize: none;
        background: url('../../assets/image/order/bi.png') no-repeat;
        background-size: 0.23rem 0.23rem;
        background-position: 0% 0.03rem;
        background-origin: content-box;
        text-indent: 0.35rem;
      }
    }
    .van-checkbox {
      margin: 0.3rem;
      font-size: 0.26rem;
      color: #040404;
    }
  }
}
</style>